<template>
	<view class="container" v-if="activityInfo">
		<u-navbar title="合成" title-size="34" :custom-back="goBack" back-icon-color="#292940"  title-color="#292940" :border-bottom="false" placeholder></u-navbar>
		<view class="card-top"></view>
		<view class="card-title u-line-2">{{activityInfo.name}}</view>
		<view class="active-time">{{activityInfo.begin_time.substring(0,16).replace(/\-/g,"/")}}<text class="mx-2">至</text>{{activityInfo.end_time.substring(0,16).replace(/\-/g,"/")}}</view>
		<view class="card-content">
			<view class="card-list-box" v-for="item in list">
				<view class="card-bg-style card-list-top"></view>
				<view class="card-bg-style card-list-center">
					<view class="d-flex justify-content-between align-items-center">
						<view class="d-flex align-items-center">
							<view>
								<view class="d-flex align-items-center card-bg-style card-item-box">
									<view v-for="val in item" v-if="val.is_result == 0" class="d-flex align-items-center justify-content-center card-item card-border position-relative">
										<view class="card-image">
											<image :src="val.works.file" mode="aspectFill" v-if="val.works.type == 1"></image>
											<image :src="val.works.cover" mode="aspectFill" v-else></image>
											<view class="mask-buy" v-if="val.had_count < val.count" @click="buyItem(val)">
												<image src="../../static/home/shopping-card.png" mode="aspectFill"></image>
											</view>
										</view>
										<view class="card-label d-flex align-items-center justify-content-center position-absolute">
											<span :class="{'card-label0':val.had_count < val.count}">
												<text v-if="val.had_count >= val.count">{{val.count}}</text>
												<text v-else>{{val.had_count}}</text>
											</span>
											<span>/</span>
											<span>{{val.count}}</span>
										</view>
									</view>
								</view>
							</view>
							<view class="d-flex align-items-center justify-content-center card-arrow">
								<image src="/static/home/card-arrow.png"></image>
							</view>
						</view>
						<view class="d-flex align-items-center justify-content-center card-item-right position-relative card-border" v-for="val in item" v-if="val.is_result == 1">
							<view class="card-right-img">
								<image :src="val.works.file" mode="aspectFill" v-if="val.works.type == 1"></image>
								<image :src="val.works.cover" mode="aspectFill" v-else></image>
							</view>
							<view class="card-synthesis-bg position-absolute"></view>
						</view>
					</view>
					<view class="card-bg-style card-btn" @tap="showBox(item)" v-if="isCanCompose(item)">合成</view>
					<view class="card-bg-style card-btn opacity-5" v-else>合成</view>
				</view>
				<view class="card-bg-style card-list-bottom"></view>
			</view>
			<view class="card-text">
				<u-parse :html="activityInfo.content"></u-parse>
			</view>
		</view>
		<u-popup v-model="isBoxShow" @close="close" mode="center" :mask-custom-style="bg">
			<view class="blind-box">
				<view class="d-flex justify-content-around flex-wrap">
					<view class="card-border popup-card-bg d-flex justify-content-center align-items-center position-relative"  v-for="item in showList">
						<view class="popup-card-img">
							<image :src="item.works.file" mode="aspectFill" v-if="item.works.type == 1"></image>
							<image :src="item.works.cover" mode="aspectFill" v-else></image>
						</view>
						<view class="popup-card-label text-center position-absolute">
							<span>{{item.count}}</span>
						</view>
					</view>
				</view>
				<view class="card-bg-style popup-btn" @click="activityMake">确认合成</view>
				<view class="cancel-text fz-32 text-center" @tap="isBoxShow = false">取消合成</view>
			</view>
		</u-popup>
		<u-popup v-model="isCardShow" @close="close" mode="center">
			<view class="popup-card-box" v-if="nowCompose">
				<view class="card-box-pr d-flex justify-content-center align-items-center">
					<view class="card-box d-flex justify-content-center align-items-center">	
						<view class="last-img-box">
							<view class="last-img" >
								<image :src="nowCompose.works.file" mode="aspectFill" v-if="nowCompose.works.type == 1"></image>
								<image :src="nowCompose.works.cover" mode="aspectFill" v-else></image>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-card-btn" @tap="toDetail">前往查看</view>
				<view class="close-icon mx-auto" @click="isCardShow = false">
					<image src="/static/market/close-circle.png"></image>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="modalShow" @confirm="confirm" content="是否前往购买此藏品？" show-cancel-button confirm-color="#00C0FF"></u-modal>
		<u-modal v-model="showVerModal" ref="uModal" content="确定前往实名认证吗？" show-cancel-button  @confirm="toVer" confirmColor="#00C0FF"></u-modal>
		<u-modal v-model="showOpenWallet" ref="uModal" content="确定前往开通钱包吗？" show-cancel-button  @confirm="toWallet" confirmColor="#00C0FF"></u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				bg:{background: 'rgba(0, 0, 0, 0.8)'},
				modalShow:false,
				nowBuy:null,
				isBoxShow:false,
				isCardShow:false,
				activity_id:'',
				activityInfo:null,
				ways:[],
				hasList:[],
				list:[],
				showList:[],//需要合成的卡片
				nowCompose:null,//当前合成结果的卡片
				showVerModal:false,//是否前往实名认证
				showOpenWallet:false,//是否前往开通钱包
			}
		},
		onLoad(options) {
			this.activity_id = options.activity_id
			this.activityShow()
		},
		computed:{
			USER(){
				return this.$store.state.auth.USER
			}
		},
		methods: {
			goBack(){
				let pages = getCurrentPages(); // 当前页面路由
				let beforePage = pages[pages.length - 2]; // 上一个页面路由
				if (beforePage) {
					if(beforePage.route == 'pages/secondary/mine/order-wait'){
						return uni.redirectTo({
							url:'/pages/secondary/card-list'
						})
					}
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url:'/pages/tabBars/mine'
					})
				}
			},
			//前往实名认证
			toVer(){
				uni.navigateTo({
					url:'/pages/setting/verified'
				})
			},
			//前往开通钱包
			toWallet(){
				uni.navigateTo({
					url:'/pages/secondary/mine/wallet'
				})
			},
			showBox(list){
				this.isBoxShow = true
				this.showList = []
				for(let i of list){
					if(i.is_result == 0){
						this.showList.push(i)
					}else{
						this.nowCompose = i
					}
				}
			},
			isCanCompose(list){
				for(let i of list){
					if(i.is_result == 0){
						if(i.had_count - i.count < 0){
							return false
						}
					}
				}
				return true
			},
			//合成
			activityMake(){
				this.isBoxShow = false
				this.$store.dispatch('public/activityMake',{activity_id:this.activity_id,way:this.showList[0].way}).then(res=>{
					this.isCardShow = true
					this.$store.commit('works/SET_ISREFRESH',true)
					this.$store.commit('works/SET_ISREFRESHMARKET',true)
					this.activityHad()
				})
			},
			toDetail(){
				this.isCardShow = false
				uni.navigateTo({
					url:`/pages/secondary/collection/index?work_id=${this.nowCompose.works_id}`
				})
			},
			buyItem(item){
				//未认证，则提示是否前往实名认证
				if(this.USER.status == 0){
					return this.showVerModal = true
				}
				//未开通钱包，则提示是否前往开通钱包
				if(this.USER.wallet_count == 0){
					return this.showOpenWallet = true
				}
				this.nowBuy = item
				this.modalShow = true
			},
			confirm(){
				// this.orderBuy()
				uni.navigateTo({
					url:`/pages/secondary/market/index?work_id=${this.nowBuy.works_id}&activity_id=${this.activity_id}`
				})
			},
			//创建订单
			orderBuy(){
				this.$store.dispatch('wallet/orderBuy',{market_id:this.nowBuy.works_id,type:1}).then(res=>{
					uni.navigateTo({
						url:`/pages/secondary/mine/order-wait?order_id=${res.data.id}&activity_id=${this.activity_id}`
					})
				})
			},
			close(){},
			//活动详情
			activityShow(){
				this.$store.dispatch('public/activityShow',{activity_id:this.activity_id}).then(res=>{
					this.activityInfo = res.data.activity
					this.ways = res.data.ways
					this.activityHad()
				})
			},
			//拥有数量
			activityHad(){
				this.$store.dispatch('public/activityHad',{activity_id:this.activity_id}).then(res=>{
					this.hasList = res.data
					let arr = []
					for(let i in this.ways){
						arr.push(this.ways[i])
					}
					//处理二维数组，增加拥有数量属性
					for(let i of arr){
						for(let k of i){
							for(let j of this.hasList){
								if(k.works_id == j.id){
									if(j.had_count == null){
										j.had_count = 0
									}
									this.$set(k,'had_count',j.had_count)
								}
							}
						}
					}
					this.list = arr
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		background:#010101;
	}
	.card-top{
		width: 100%;
		height: 500upx;
		background-image: url(/static/home/card-banner.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
		padding-top: 453upx;
		box-sizing: border-box;
		
	}
	.card-title{
		text-align: center;
		width: 100%;
		padding: 0 90upx;
		box-sizing: border-box;
		line-height: 48upx;
		font-size: 40upx;
		font-weight: bold;
		color: #00F9EF;
		letter-spacing: 6upx;
	}

	.active-time{
		margin:31upx auto 34upx;
		border-radius: 6upx;
		font-size: 28upx;
		color: #00F9EF;
		text-align: center;
		width: 680upx;
		height: 64upx;
		line-height: 60upx;	
		border: 2upx solid rgba(0, 249, 239, 0.3);
		
	}
	.card-bg-style{
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.card-content{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		
		.card-list-box{
			width: 100%;
			margin-bottom: 46upx;
			.card-item-box{
				min-height: 120upx;
				width: 442upx;
				padding: 28upx 24upx;
				box-sizing: border-box;
				margin-right: 4upx;
				flex-wrap: wrap;
				box-shadow: inset 0px 0px 9upx 0px #3277FF, inset 0px 7upx 30upx 0px rgba(0,146,232,0.2);
				border-radius: 24upx 6upx 6upx 6upx;
				.card-item{
					width: 120upx;
					height: 120upx;
					border-radius: 8upx;
					margin-right: 16upx;
					margin-top: 16upx;
					.card-image{
						width: 112upx;
						height: 112upx;
						border-radius: 8upx;
						overflow: hidden;
						position: relative;
						background:#010101;
						image{
							width: 112upx;
							height: 112upx;
							vertical-align: top;
						}
						.mask-buy{
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: rgba(0, 0, 0, 0.4);
							image{
								width: 35upx;
								height: 35upx;
							}
						}
					}
					.card-label{
						display: inline-block;
						min-width: 50upx;
						height: 30upx;
						padding-bottom: 2upx;
						background:#00FE9F;
						border-radius: 2upx 8upx 2upx 16upx;
						right:0upx;
						top:0upx;
						font-size: 24upx;
						color:#010101;
						font-weight: 600;
					}
					.card-label span:nth-of-type(2){
						font-weight: 400;
					}
					.card-label0{
						color:#FF4D4F
					}
				}
				.card-item:nth-of-type(1), .card-item:nth-of-type(2), .card-item:nth-of-type(3){
					margin-top: 0;
				}
				.card-item:nth-of-type(3), .card-item:nth-of-type(6),.card-item:nth-of-type(9),.card-item:nth-of-type(12),.card-item:nth-of-type(15){
					 margin-right: 0;
				}
			}
			
			.card-arrow{
				width: 48upx;
				height: 48upx;
				margin-left: 4upx;
				image{
					width: 48upx;
					height: 48upx;
					vertical-align: top;
				}
			}
		
			.card-item-right{
				width: 138upx;
				height: 138upx;
				border-radius: 8upx;
				
				.card-right-img{
					width: 130upx;
					height: 130upx;
					border-radius: 8upx;
					image{
						width: 130upx;
						height: 130upx;
						vertical-align: top;
						border-radius: 8upx;
					}
					
				}
			}
			.card-synthesis-bg{
				width: 242upx;
				height: 242upx;
				background: url(/static/home/card-synthesis.png) no-repeat;
				background-size: 100%;
				top:-54upx;
				left:-54upx;
			}
			.card-btn{
				width: 100%;
				height: 98upx;
				background-image: url(/static/home/big-btn.png);
				margin-top: 46upx;
				line-height: 98upx;
				font-size: 36upx;
				text-align: center;
				font-weight: 600;
				color:#431701;
			}
			.opacity-5{
				opacity: 0.5;
			}
		}
		
		.card-list-top{
			width: 100%;
			height: 46upx;
			background-image:url(/static/home/card-bg-top.png);
		}
		.card-list-center{
			width: 100%;
			padding:0 20upx;
			box-sizing: border-box;
			min-height:294upx;
			background-image:url(/static/home/card-bg-center.png);
		}
		.card-list-bottom{
			width: 100%;
			height: 46upx;
			background-image:url(/static/home/card-bg-bottom.png);
		}
	}
	.card-border{
		background: linear-gradient(180deg, rgba(0, 255, 158, 1), rgba(5, 227, 225, 1));
	}
	.card-text{
		padding-top: 30upx;
		font-size: 28upx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #00EFFB;
		line-height: 40upx;
		padding-bottom: 40upx;
	}
	/deep/.u-mode-center-box {
		background: rgba(255, 255, 255, 0);
	}
	
	.blind-box {
		background: rgba(255, 255, 255, 0);
		width: 630upx;
		// height: 486upx;
		.popup-card-bg{
			width: 188upx;
			height: 188upx;
			border-radius: 8upx;
			margin-bottom: 72upx;
			.popup-card-img{
				width: 180upx;
				height: 180upx;
				border-radius: 8upx;
				background: #010101;
				image{
					width: 180upx;
					height: 180upx;
					border-radius: 8upx;
					vertical-align: top;
				}
			}
		}
		// .popup-card-bg:nth-of-type(1), .popup-card-bg:nth-of-type(2), .popup-card-bg:nth-of-type(4), .popup-card-bg:nth-of-type(5), .popup-card-bg:nth-of-type(7), .popup-card-bg:nth-of-type(8){
		// 	margin-right: 15px;
		// }
		.popup-card-label{
			display: inline-block;
			min-width: 32upx;
			height: 30upx;
			padding-bottom: 2upx;
			background: #00FE9F;
			border-radius: 2upx 8upx 2upx 12upx;
			right:0upx;
			top:0upx;
			font-size: 24upx;
			color:#07193D;
			font-weight: 600;
			line-height:28upx;
		}
		.popup-btn{
			width: 420upx;
			height: 94upx;
			background:url(/static/home/small-btn.png) no-repeat;
			background-size: 100%;
			line-height: 94upx;
			font-size: 36upx;
			text-align: center;
			font-weight: 600;
			color:#431701;
			margin:0 auto;
			
		}
		.cancel-text{
			margin-top: 50upx;
			color: #D8D9E1;
		}
	}
	.close-icon {
		width: 64upx;
		height: 64upx;
	
		image {
			width: 64upx;
			height: 64upx;
		}
	}
	.popup-card-box{
		width: 100%;
			
		.card-box-pr{
			width: 750upx;
			height: 750upx;
			animation: rou 15s linear forwards infinite;
		}
		.card-box{
			width: 450upx;
			height: 450upx;
			background: url(/static/home/gifImg.gif) no-repeat;
			background-size: 100% 100%;
			background-size: cover;
			animation: run 0.6s linear forwards 1;
			.last-img-box{
				width: 112upx;
				height: 112upx;
				box-sizing: border-box;
				transform: translateX(-4upx) translateY(-2upx) rotateZ(0deg);
				animation: roufan 15s linear forwards infinite;
				
				.last-img{
					padding: 2upx;
					width: 100%;
					height: 100%;
					background: linear-gradient(180deg, rgba(0, 255, 158, 1), rgba(5, 227, 225, 1));
					border-radius: 6upx;
					animation: big 2s ease-in-out forwards 1;
					image{
						width: 100%;
						height: 100%;
						border-radius: 6upx;
					}
				}
			}
		}
		@keyframes big {
			0%{
				transform:scale(0.2);
			}
			100%{
				transform:scale(1);
			}
		}
		@keyframes roufan {
			0%{
				transform:rotateZ(360deg) ;
			}
			100%{
				transform:rotateZ(0deg);
			}
		}
		@keyframes rou {
			0%{
				
				transform:rotateZ(0deg) ;
			}
			100%{
				transform:rotateZ(360deg);
			}
		}
		@keyframes run {
			
			0%{
				
				transform:scale(0.6) rotateZ(-180deg) ;
			}
			100%{
				transform:scale(1.8) rotateZ(0deg);
			}
		}
		.popup-card-btn{
			width: 422upx;
			height: 88upx;
			border-radius: 49upx;
			margin:50upx auto;
			line-height: 88upx;
			color:#431701;
			font-weight: 600;
			background: url(/static/home/small-btn.png) no-repeat;
			background-size: 100%;
			font-size:32upx;
			text-align: center;
		}
	}
</style>